<template>
  <div class="background">
    <Menu
      mode="horizontal"
      :theme="theme1"
      active-name="999"
      class="navigation"
    >
      <MenuItem name="999"> 企业网站管理后台 </MenuItem>
      <MenuItem name="1"> 新建 </MenuItem>
      <MenuItem name="2"> 查看站点 </MenuItem>
      <MenuItem name="3"> 清理缓存 </MenuItem>
      <MenuItem name="4"> 帮助 </MenuItem>
      <div class="demo-avatar">
        <Icon
          :style="{ margin: '0 10px 0 0' }"
          type="ios-search"
          color="white"
          size="30"
        />
        <Icon
          :style="{ margin: '0 10px 0 0' }"
          type="ios-notifications-outline"
          color="white"
          size="30"
        />
        <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
        <span>用户名</span>
        
        
      </div>
    </Menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theme1: "dark",
    };
  },
};
</script>
<style scoped>
.navigation {
  width: 1152px;
  margin: 0 auto;
  position: relative;
}
.background {
  background: #515a6e;
}
.demo-avatar {
  position: absolute;
  width: 160px;
  right: 0;
  top: 5px;
}
.demo-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  bottom: 32%;
  right: 50px;
  position: absolute;
}
.demo-avatar span {
  color: white;
  position: absolute;
  right: 0;

}
</style>